import {  createContext,  useContext, useState } from 'react';

const myContext = createContext<any>(null)

// useContext 不能改变传递的方式，但是可以改变获取的方式

// 1
const Home = () => {
  // useState / state / reducer
  const [data, setData] = useState({name: '1811A', age: '2', info: 'web前端'});

  return <div>Home
    <myContext.Provider value={data}>
      <HomeFoo />
    </myContext.Provider>
  </div>
}

// 2
const HomeFoo = () => {
  const context = useContext(myContext);

  return <div>HomeFoo

    <h2>我是第二个组件：{context.name}</h2>
      {/* <myContext.Consumer>
        {
          (value) => {
           return <div>我是第二个组件：{value.name} {value.age}</div>
          }
        }
      </myContext.Consumer> */}
    <HomeFooChild />


  </div>
}

// 3
const HomeFooChild = () => {
  const context = useContext(myContext);

  return <div>HomeFooChild
    <h3>我是第三个组件：{context.name} {context.age}</h3>
      {/* <myContext.Consumer>
        {
          (value) => {
           return <div>我是第三个组件：{value.name} {value.age}</div>
          }
        }
      </myContext.Consumer> */}

  </div>
}



export default Home;

